import React, {JSX, useEffect, useState} from "react";
import {Image, Text, View} from "@tarojs/components";
import {GetGoods} from "../../api/bus/product";
import {padImgURI} from "../../utils";
import './index.scss';

export interface IGoodItem {
  Img: string,
  Name: string,
  SoldNum: number, // 库存
  Price: number,
}

export const GoodItem : React.FC<{item: IGoodItem}> = ({item}): JSX.Element => {
  const onAdd = () => {
    console.log('只做展示')
  }
  return (
    <View className='GoodItem flex'>
      <View className='left'>
        <Image lazyLoad className='prodImg' src={padImgURI(item.Img)}></Image>
      </View>
      <View className='right flex-column justify-between'>
        <View className='title'>{item.Name}</View>
        <View>
          <View className='sale'>已售{item.SoldNum}</View>
          <View className='action align-center justify-between'>
            <Text className='price'>￥ {item.Price}</Text>
            <View className='onAdd' onClick={()=> onAdd()}>
              <Image className='addIcon' src={require('@/static/images/category/add.png')}></Image>
            </View>
          </View>
        </View>
      </View>
    </View>
  )
}

export const Good : React.FC = (): JSX.Element => {
  const [goods, setGoods] = useState([]);
  const onSetGoods = () => {
    GetGoods().then(res => {
      setGoods(res || []);
    })
  }
  useEffect(() => {
    onSetGoods();
  }, [])
  return (
    <View className='GoodPage'>
      {goods.map(item => (
        <GoodItem key={item.Id} item={item}></GoodItem>
      ))}
    </View>
  )
}

export default Good;
